<template>
  <div class="child" @mousedown="handleMouseDown">
    <FlipNumberClock />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import FlipNumberClock from "./components/FlipNumberClock.vue";

const { setPosition } = window.services.winApi;

// 拖拽状态变量
let isDragging = false;
let startX = 0;
let startY = 0;

// 鼠标按下事件
const handleMouseDown = (e) => {
  isDragging = true;
  startX = e.clientX;
  startY = e.clientY;
};

// 鼠标移动事件处理
const handleMouseMove = (e) => {
  if (!isDragging) return;
  console.log("鼠标移动中...");

  // 计算新位置并移动窗口
  const x = e.screenX - startX;
  const y = e.screenY - startY;
  utools.sendToParent("update-position", { x, y });
};

// 鼠标释放事件处理
const handleMouseUp = () => {
  isDragging = false;
};

// 组件挂载时注册全局事件监听
onMounted(() => {
  document.addEventListener("mousemove", handleMouseMove);
  document.addEventListener("mouseup", handleMouseUp);
});

// 组件卸载时移除事件监听，防止内存泄漏
onUnmounted(() => {
  document.removeEventListener("mousemove", handleMouseMove);
  document.removeEventListener("mouseup", handleMouseUp);
});
</script>

<style scoped lang="scss">
.child {
  width: 100vw;
  height: 100vh;
  cursor: move; /* 鼠标样式：可移动 */
  //缩放窗口的时候会出现滚动条，所以设置overflow: hidden;
  overflow: hidden;
  // background: rgba(194, 59, 59, 0.2); /* 透明背景不在选择范围内 */
}
</style>
